<template>
	<div>
		<div class="pt16 pr16 pl16 pb12">
			<div class="replay-card flexsb pb12">
				<img class="br50" :src="data.askAvatar" alt="" @error="data.askAvatar=require('@/assets/icon/avatar.png')">
				<div class="flexitem pl16">
					<div class="fz16">{{ data.askName }}</div>
					<div class="fz12">{{ (data.createTime).substring(0,10) }}</div>
				</div>
				<div class="fz12">{{ data.count || 0 }}个回答</div>
			</div>
			<div class="lh20 pb12">
				<span class="pd2 blue white fz12">问</span>
					{{ data.description }}
			</div>
			<div class="flexsb" style="flex-wrap:wrap;justify-content: normal;"  v-for="(item,index) in ((data.imgs || '').split(','))" :key="index">
				<img style="width: 30%;margin: 2px;height: 150px;" v-if="item"   :src="item" alt="">
			</div>
		</div>
		<div class="line10px"></div>
		<div class="pt12 pl16" style="padding-bottom: 160px">
			<div class="pb12 border-bottom-1">
				<span class="bgred white fz12 pd2">答</span>
				<span class="fz16 pl15">全部回答</span>
			</div>
			<div class="pt12 pb12 pr16 border-bottom-1" v-for="item in data.list || []" :key="item.id">
				<div class="replay-card flexsb pb12">
					<img class="br50" :src="item.avatar" @error="item.avatar=require('@/assets/icon/avatar.png')" alt="">
					<div class="flexitem pl16">
						<div class="fz16"><span>{{ item.person }}</span>
						<span class="ml8 fz10 skillstar" v-if="item.source === 0">
							<img v-for="item in item.skillStar" :key="item+5" :src="require('@/assets/icon/wjx-active.png')" />
					        <img  v-for="item in (5 - item.skillStar)" :key="item" :src="require('@/assets/icon/wjx.png')" />
				         </span></div>
						<div class="fz12">{{ (item.createTime).substring(0,10) }}</div>
					</div>
					<!-- <div class="fz12 flexcc"><img style="width:19px;height:19px" class="mr6" src="@/assets/icon/zan.png"/>80</div> -->
				</div>
				<div class="lh20">

				  {{ item.content }}
				</div>
				<div class="flexsb" style="flex-wrap:wrap;justify-content: normal;" v-for="(ele,index) in ((item.imgs || '').split(','))" :key="index">
					<img style="width: 30%;margin: 2px;height: 150px;"  v-if="ele" :src="ele" alt="">
				</div>
			</div>
		</div>
		 <div class="button-bottom pd1" v-if="isExpert">
			<van-button block type="info" native-type="submit" @click="$router.push({ name: 'ReplyForm', params: { role: 'expert', id: data.id } })">写回答</van-button>
		</div>
	</div>
</template>
<script>
import { Button } from 'vant'
import API from '@/services'
import { mapGetters } from 'vuex'
export default {
	components: { VanButton: Button },
	data() {
		return {
			data: {},
		}
	},
	props: ['role', 'id'],
	async created() {
		const data = await API.getReplyDetail({ params: { problemId: this.id } })
		this.data = data
	},
	computed: {
		...mapGetters(['isExpert']),
	},
}
</script>
<style lang="scss" scoped>
.router-container{
	padding: 0!important
}
.replay-card{
	img{
		width: 44px;
		height: 44px;
	}
}
.skillstar{
	img{
		width: 15px;
		height: 15px;
	}
}
</style>
